import Vue from 'vue'
import VueRouter from 'vue-router'

import About from '@/views/About'
import Home from '@/views/Home'
import News from '../views/News'
import Message from '../views/Message'
import MessageDetail from '../views/MessageDetail'

// 声明使用Vue插件
Vue.use(VueRouter)

// 向外暴露路由器对象
export default new VueRouter({
  mode: 'history',
  // 路由配置
  routes: [
    {
      path: '/about',
      component: About
    },
    {
      path: '/home',
      component: Home,
      children: [
        {
          path: '/home/news',
          component: News
        },
        {
          path: '/home/message',
          component: Message,
          children: [
            {
              name: 'detail',
              path: '/home/message/detail/:mid',
              component: MessageDetail,
              // props: true // 如果 props被设置为 true，route.params将会被设置为组件属性
              props: (route) => ({
                mid: route.params.mid,
                title: route.query.title
              }) // 箭头函数传递一个对象时需要在外面包一个括号
            }
          ]
        },
        {
          path: '',
          redirect: '/home/news'
        }
      ]
    },
    // 自动跳转的路由
    {
      path: '/',
      redirect: '/about'
    }
  ]
})